<template>
  <div id="second">
    <x-header :left-options="{showBack: false}" @on-click-back="comehome" style="background-color:#4786ff;">部门出库任务中</x-header>

    <div class="card">
      <div class="item">
        <span class="key">工号:</span>
        <span class="value">{{sgh}}</span>
      </div>
      <div class="item">
        <router-link :to="{ path:'/scan/id', query: { gh:  sgh} }" class="btn">
          <span class="key">已扫码出库卡片数:</span>
          <span class="value">{{ssize}}</span>
        </router-link>
      </div>
      <!--<div class="itembtn"></div>-->
    </div>
    <div class="card" v-show="showDeptdata">
      <div class="item">
        <span class="key">出库部门:</span>
        <span class="value">{{bmmc}}</span>
      </div>
      <div class="itembtn" @click.preventDefault="showdialog">
        <x-button mini type="primary">切换</x-button>
      </div>
    </div>

    <x-table class='chart1' :cell-bordered="false" style="background-color:#fff;" v-show="showtable">
      <thead>
      </thead>
      <tbody>
      <tr>
        <td class="td-left">库房名称</td>
        <td class="td-right">{{querydata.kfmc}}</td>
      </tr>
      <tr>
        <td class="td-left">卡片编号</td>
        <td class="td-right">{{querydata.kpbh}}</td>
      </tr>
      <tr>
        <td class="td-left">资产名称</td>
        <td class="td-right">{{querydata.zcmc}}</td>
      </tr>

      <tr>
        <td colspan="2">
          <flexbox style="padding-top: 5px; bottom: 70px ">
            <flexbox-item>
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: dodgerblue"
                        @click.native="confirmdata"><span class="ic_elect"></span><span class="text">确定</span>
              </x-button>
            </flexbox-item>

          </flexbox>
        </td>


      </tr>
      <tr></tr>
      <tr></tr>
      <tr></tr>
      </tbody>
    </x-table>


    <tabbar style="position:fixed;bottom:0;width:100%">
      <tabbar-item>

        <span slot="label"> <x-button type="primary" class="sm-btn" @click.native="ScanCode">扫码出库</x-button></span>
      </tabbar-item>


    </tabbar>


    <div v-transfer-dom>
      <confirm v-model="showkp" :title="confirmtext" confirm-text="是" theme="ios" cancel-text="否"
               @on-confirm="onConfirmKp">
        <p style="text-align:center;">当前界面有未确认的卡片，是否继续当前操作</p>
      </confirm>
    </div>


    <div v-transfer-dom>
      <loading :show="modelshow==1" :text="加载中"></loading>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="smqr">
        <div class="search">
          <input type="text" v-model="keyword">
          <x-button mini type="primary" @click.native="search">搜索</x-button>
        </div>
        <div class="table">
          <checklist ref="demoObject" :options="objectList" v-model="objectListValue" :max="1"></checklist>
        </div>
        <div class="operate-btn">
          <button class="cancle" @click="smqr=false">取消</button>
          <button class="confirm" @click="queding">确定</button>
        </div>
      </x-dialog>
    </div>
    <scan ref="scan" @scanResult="scanResult"></scan>
  </div>
</template>

<script>


  import {XTable, LoadMore, XHeader} from 'vux'
  import {XButton, Box, GroupTitle, Group, Flexbox, FlexboxItem, Divider} from 'vux'
  import {AjaxPlugin} from 'vux'
  import {XDialog, TransferDomDirective as TransferDom} from 'vux'
  import {CellBox, Checklist, Selector} from 'vux'
  import {Confirm, AlertModule, Alert} from 'vux'
  import {XInput, Cell} from 'vux'
  import {Tabbar, TabbarItem} from 'vux'
  import {Loading} from 'vux'
  import dingtalk from 'dingtalk-javascript-sdk';
  import Qs from 'qs'
  import axios from 'axios'
  import scan from "./components/scan"
  import config from "./common/js/config.js"

  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      XTable,
      Flexbox,
      FlexboxItem,
      Group,
      XHeader,
      CellBox,
      Selector,
      Confirm,
      Alert,
      XInput,
      Cell,
      Tabbar,
      TabbarItem,
      Loading,
      dingtalk,
      XDialog,
      Checklist,
      Qs,
      axios,
      scan,
      config
    },
    data() {
      return {
        keyword: "",
        objectListValue: [],
        objectList: [],
        ssize: '',
        smqr: false,
        sgh: '',
        querydata: '',
        show: false,
        yqdata: '',
        yqlist: [],
        lqdata: '',
        lqlist: [],
        showazd: false,
        AlternateKpbh: '',
        confirmtext: '提示',
        detailwz: '',
        showkp: false,
        byazdd: '',
        azYq: '',
        azWzdz: '',
        showtable: true,
        kpbh: '',
        showbutton: false,
        ConfirmedSize: '',
        secondpageurl: config.baseurl,
        modelshow: '0',
        showDeptdata: true,
        bmmc: '',
        djh: '',
        showzk: false


      }

    },
    methods: {

      scanLoad() {//调用组件的扫码方法
        this.$refs.scan.scan();
      },
      scanResult(ops) {//返回扫码的结果
        this.ExecuteScan(ops.result);
      },
      onHide() {

      },
      onShow() {

      },


      showdialog() {
        this.smqr = true;
        var This = this;
        axios.get(this.secondpageurl + '/wd-wmt/Inventory/QueryDept?name=' + this.keyword)
          .then(function (response) {
            This.objectList = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },


      queding() {
        if (this.objectListValue.length != 0) {
          var index = this.objectListValue[0];
          for (var i = 0; i < this.objectList.length; i++) {
            var obj = this.objectList[i];
            if (index == obj.key) {

              var Dept = {
                bmxh: obj.key,
                bmdm: obj.id,
                bmmc: obj.value,
              }
              this.submitdialog(Dept)
            }

          }
          this.smqr = false;
        } else {
          this.smqr = false;

        }

      },

      submitdialog(data) {

        var This = this
        var dept = Qs.stringify({Dept: JSON.stringify(data)})
        axios.post(this.secondpageurl + '/wd-wmt/Inventory/SaveBill',
          dept,
          {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
        ).then((data) => {
          This.showDeptdata = data.data.returncode
          This.bmmc = data.data.inventoryDept.bmmc
        }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      search() {
        var This = this;
        axios.get(this.secondpageurl + '/wd-wmt/Inventory/QueryDept?name=' + this.keyword)
          .then(function (response) {
            This.objectList = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },


      comehome() {
        this.$router.replace({path: '/home'});

      },

      confirmdata() {
        this.showbutton = true


        var data = {
          kpxh: this.querydata.serial_no,
          kpbh: this.querydata.kpbh,
          kfdm: this.querydata.kfdm,
          kfmc: this.querydata.kfmc,
          zcxh: this.querydata.zcxh,
          zcdm: this.querydata.zcdm,
          zcmc: this.querydata.zcmc,
        }
        var Back = Qs.stringify({Back: JSON.stringify(data)})
        console.log(Back)
        axios.post(this.secondpageurl + '/wd-wmt/Deliver/SaveBack',
          Back,
          {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
        ).then((data) => {
          console.log(data)
          if (data.data.code) {
            this.ssize = data.data.size
            this.sgh = data.data.gh
            this.querydata = ''
            this.showtable = false
            this.showbutton = true
          }
        }).catch(e => {
          // 打印一下错误
          console.log(e)
        })


      },


      QuerySecondPage(kpbh) {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Deliver/ScanQRCode?kpbh=' +kpbh)
          .then((data) => {
            console.log(data.data)
            if (data.data.inventoryDept != null) {
              this.bmmc = data.data.inventoryDept.bmmc
            }
            this.sgh = data.data.gh;
            this.ssize = data.data.size;
          if(!data.data.returncode){
            if (data.data.serial_no != null) {
              this.querydata = data.data
            } else {
              this.querydata = "";
            }
            if (this.querydata == '') {
              this.showtable = false
              this.showbutton = true
              this.showModuleAuto(data.data.message)
            } else {
              this.showbutton = false
              this.showtable = true
            }
          }else {
            this.AlertConfirmedMessage();
            this.showtable = false
          }
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      onConfirmKp() {
        this.scanLoad();
      },
      ExecuteScan(kpbh) {
        this.byazdd = ''
        this.AlternateKpbh = kpbh
        this.QuerySecondPage(kpbh)
      },

      ScanCode() {
        if (this.querydata != '') {
          this.showkp = true
        } else {
          this.scanLoad();
        }
        /*        this.scanLoad();*/
      },
      showModuleAuto(message) {
        AlertModule.show({
          title: '',
          content: message,
          onShow() {

          },
          onHide() {

          }
        })
        setTimeout(() => {
          AlertModule.hide()
        }, 5000)
      },
      AlertConfirmedMessage() {
        AlertModule.show({
          title: '',
          content: '当前的卡片信息已在任务列表中,请勿重复操作',
          onShow() {

          },
          onHide() {

          }
        })
        setTimeout(() => {
          AlertModule.hide()
        }, 5000)
      }

    },
    mounted() {
      this.sgh = this.$route.query.gh
      this.ssize = this.$route.query.size

      if (this.$route.query.kpbh == '0') {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Deliver/ScanQRCode')
          .then((data) => {
            this.sgh = data.data.gh;
            this.ssize = data.data.size;
            this.querydata = ''
            this.showtable = false
            this.showbutton = true
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })

      } else {
        this.AlternateKpbh = this.$route.query.kpbh
        this.QuerySecondPage(this.$route.query.kpbh)
      }
    }

  }


</script>

<style lang="less" scoped>
  @import '~vux/src/styles/close';
  @import '~vux/src/styles/1px.less';

  #second {
    height: 100%;
  }

  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }

  .chart1 {
    /* flex: 1; */
    width: 90% !important;
    margin: 0px auto !important;
    margin-bottom: 100px !important;
    background-color: #fff !important;
    border-radius: 10px !important;
  }

  .td-left {
    text-align: left;
    color: #c7ccd6;
    padding-left: 10px
  }

  .td-right {
    text-align: right;
    color: #343f51;
    padding-right: 10px
  }

  .dialog-title {
    line-height: 30px;
    color: #666;
  }

  .icon-btn {
    display: inline-block !important;
    width: 100% !important;
    height: 35px !important;
    line-height: 35px !important;
    text-align: center !important;
    padding: 0;
    /*padding-left: 16px!important;*/
    color: #4786ff !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;
  }

  .icon-btn:after {
    /*margin-left: 10px !important;*/
    border-width: 0 !important;
    border-radius: 50px !important;
  }

  .icon-site {
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom !important;
    background: url("./assets/site.png") no-repeat;
    background-position: center;
    background-size: contain;
  }

  .ic_elect {
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom !important;
    background: url("./assets/ic_elect@2x.png") no-repeat;
    background-position: center;
    background-size: contain;
  }

  .ic_chehui {
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom !important;
    background: url("./assets/ic_chehui@2x.png") no-repeat;
    background-position: center;
    background-size: contain;
  }

  .text {
    font-size: 16px !important;
  }

  .img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }

  .btn5 {
    color: #fff !important;
    background-color: #4786ff !important;
    border-radius: 50px !important;
  }

  .btn5:after {
    margin-left: 10px !important;
    border-width: 0 !important;
    border-radius: 50px !important;
  }

  .required {
    position: absolute;
    left: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
  }

  .tip {
    position: absolute;
    right: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
    z-index: 5;
  }

  .dialog-header {
    width: 100%;
    height: 35px;
    background: url("./assets/ic_person@2x.png") no-repeat;
    background-position: right;
    background-size: contain;
    background-color: #4786ff;
  }

  .weui-cells {
    margin-top: 0 !important;
    overflow: inherit !important;
  }

  .dialog-title {
    line-height: 30px;
    color: #666;
  }

  .img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }

  .sm-btn {
    background-color: #4786ff !important;
  }

  .weui-cell {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

  .weui-cells:before {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

  .weui-cells:after {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

  .weui-cells {
    margin-top: 0 !important;
  }

  .close {
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: -50px;
    z-index: 10;
    text-align: center;
    font-size: 32px;
  }

  .close .weui-icon-clear {
    font-size: 32px;
    color: #fff;
    opacity: 0.6;
  }

  .vux-close {
    margin-left: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
    color: red;
  }


</style>
